<template>
  <div>
    <el-container>
      <el-header class="homeHeader">
        <div class="title">
            管理平台
        </div>
        <div>
          <el-button @click="goChat" icon="el-icon-bell" type="text" size="normal" style="margin-right: 8px;color: aliceblue"></el-button>
          <el-dropdown @command="commandHandle" class=" userInfo">
          <span class="el-dropdown-link">
            欢迎你,亲爱的：{{user.name}}<i><img :src="user.userface"></i>
          </span>
            <el-dropdown-menu slot="dropdown" >
              <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
              <el-dropdown-item command="settings">设置</el-dropdown-item>
              <el-dropdown-item command="logout" divided >退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <!-- 左边菜单栏 -->
      <el-container>
        <el-aside width="200px">
          <el-menu router unique-opened>
            <el-submenu :index="index+''" :key="index" v-for="(item,index) in routes" v-if="!item.hidden">
              <template slot="title">
                <i :class="item.iconCls"></i>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item  :key="index" :index="children.path" v-for="(children,index) in item.children">
                {{children.name}}
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 主页面 -->
        <el-main>
          <!-- 经过路由 -->
          <!-- 面包屑区域 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/home' }" v-if="this.$router.currentRoute.path != '/home'">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{path: this.$router.currentRoute.path+''}">{{this.$router.currentRoute.name}}</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="homeWelcome" v-if="this.$router.currentRoute.path == '/home'">
              欢迎使用本系统
              <div class="MyGraph">
                <Category></Category>
                <Histogram></Histogram>
                <Radar></Radar>
              </div>
            </div>
            <!-- 路由展示页面 -->
            <router-view class="homeRouterView"/>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
import Histogram from "@/components/graph/Histogram";
import Category from "@/components/graph/Category";
import Radar from "@/components/graph/Radar";
export default {
  name: "Home",
  components: {
    Histogram,
    Category,
    Radar
  },
  data(){
    return {
      //从Session中拿到用户对象
      //user: JSON.parse(window.sessionStorage.getItem("user"))

    }
  },
  //在计算属性中赋值，从VueX中获取
  computed:{
    routes(){
      //拿到所有的菜单属性
      return this.$store.state.routes;
    },
    user(){
      return this.$store.state.currentHr;//从Vuex中获取当前对象。
    }
  },
  methods: {
    //跳转到聊天界面
    goChat(){
      this.$router.push("/chat")
    },
    //用户菜单的点击处理器
    commandHandle(cmd){
      if(cmd == "logout"){//commandHandel为登出
        //推出是弹出确认消息
          this.$confirm('是否退出登录', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //点击成功后，那么
            this.getRequest("/logout");//注销登录
            this.$store.commit("initRoutes",[]);//初始化一个空数组，导致页面菜单需要重新请求(不然注销后还是之前用户登录的菜单因为已经存在到store里面了)
            this.$router.replace("/")
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '注销失败，请重试'
            });
          });
        } else {//否则为个人中心
          this.$router.push("hrInfo")
      }
      },
    },
}
</script>

<style scoped>
  .homeRouterView{
    margin-top: 25px;
  }
  .homeWelcome{
    text-align: center;
    color: #409eff;
    padding-top: 5px;
    font-size: 35px;
  }
  .homeHeader{
    background-color: #409eff;
    display: flex;
    align-items: center;/* 数轴居中 */
    justify-content: space-between;
    padding: 50px 25px;
    box-sizing: border-box;
  }
  .homeHeader{
    border: 1px #eaeaea;
    box-shadow: 0 0 30px #a8a3a3;
  }
  .homeHeader .title{
    font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    color: aliceblue;
    font-size: 30px;
  }
  .el-dropdown-link img {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    margin-left: 20px;
  }
  .el-dropdown-link {
    display: flex;
    align-items: center;
    color: aliceblue;
  }
  .userInfo .homeHeader{
    cursor: pointer;
  }
  i{
    color: #409eff;
    margin-right: 5px;
  }
  .MyGraph{
    margin-left: 100px;
    margin-top: 100px;
    display: flex;
    flex-wrap: wrap;
  }
</style>
